<script lang="ts" setup>
import { defineProps } from 'vue'
import { useRouter } from 'vue-router'
import { SearchApi } from '@/apis/index'
import { useCounterStore } from '@/stores/counter'

import type { MediaFt } from '@/TypingMore/SearchTyping'

import NofindView from '@/components/NofindView.vue'

const props = defineProps<{
  mediaFt: Array<MediaFt> | undefined
}>()

const store = useCounterStore()

const { browseRecords } = store

const router = useRouter()

const OtherEpisodes = async (url: string, season_id: number) => {
  let epId = url.split('ep')[1].split('?')[0]
  let { data } = await SearchApi.getOtherEpisodesData(Number(epId))
  console.log(data)
  for (let i = 0; i < data.result.episodes.length; i++) {
    let arr = data.result.episodes[i]
    console.log(epId, arr.id)
    if (epId == arr.id) {
      let obj = {
        bvid: arr.bvid,
        aid: arr.aid,
        length: arr.duration,
        title: arr.title,
        play: arr.play,
        video_review: arr.video_review,
        pic: arr.pic
    }
      browseRecords(obj)
      router.replace(`/video/${arr.bvid}`)
      break
    }

  }

}

console.log(props.mediaFt)
</script>

<template>
  <div class=" bg-white" v-if="(mediaFt && mediaFt.length > 0)">
    <div>
      <div class=" flex p-3" v-for="m in mediaFt" :key="m.season_id" @click="OtherEpisodes(m.url, m.season_id)">
        <img :src="m.cover + '@156w_208h_1c.webp'" alt="" class=" w-20">
        <div class=" flex-1 flex flex-col justify-between ml-3 text-xs text-gray-400 overflow-hidden">
          <h2 class=" text-sm text-black" v-html="m.title"></h2>
          <p>{{ "地区:" + m.areas }}</p>
          <p class=" whitespace-nowrap overflow-hidden text-ellipsis">{{ ('演员:' + m.cv) }}</p>
          <p class=" whitespace-nowrap overflow-hidden text-ellipsis">{{ "导演:" + m.staff }}</p>
        </div>
      </div>
    </div>
  </div>
  <NofindView v-else></NofindView>
</template>